<template>
	<xbd-pages-content :title="title">
		<template #content>
			<view class="mail-list">
				<view class="header">
					<xbd-wide-card title="通讯录人员" :num="137"></xbd-wide-card>
				</view>
				<view class="mail-list-content">
					<view class="search" @click="goSearch">
						请输入人员姓名进行查询
					</view>
					<uni-list :border="false">
						<mail-list-department :isImg="false" @goDepartmentInfo="goDepartmentInfo"></mail-list-department>
						<xbd-null-list v-if="!list.length"></xbd-null-list>
						<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore"></xbd-loading-more>
					</uni-list>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import MailListDepartment from '@/components/maillist/MailListDepartment.vue';
	export default {
		components: {
			MailListDepartment
		},
		data() {
			return {
				statusNum: 0,
				isLoadMore: false,
				list: [1],
				title: '',
				queryInfo: {
					pageIndex: 0,
					pageSize: 10
				}
			};
		},
		methods: {
			// 加载更多
			loadmore() {
				this.queryInfo.pageIndex++;
				this.statusNum = 0;
				this.isLoadMore = true;
				this.timer = setTimeout(()=> {
					this.statusNum = 1;
				}, 1500);
			},
			goSearch() {
				uni.navigateTo({
					url: './searchlist',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goDepartmentInfo(item) {
				uni.navigateTo({
					url: `./departmentinfo?title=${item.user_department}&parentTitle=${this.title}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onReachBottom() {
			// 上拉加载
			this.loadmore();
		},
		onLoad(res) {
			this.title = res.title;
		}
	}
</script>

<style lang="scss" scoped>
	.mail-list {
		.header {
			padding: 20px 50rpx;
			margin-bottom: 5px;
			
			background-color: #FFFFFF;
		}
		&-content {
			padding: 20px 50rpx;
			
			background-color: #FFFFFF;
			.search {
				padding-left: 20rpx;
				height: 30px;
				line-height: 30px;
				border: 1px solid #E9ECF7;
				margin-bottom: 10px;
				
				font-size: 14px;
				
				color: #999999;
			}
		}
	}
</style>
